<template>
	<view>
		<view class="">
			<image v-if="listinfo.bgUrl == null" @click="clickImg" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/%E8%83%8C%E6%99%AF.png" mode="aspectFill" style="width: 100%;"></image>
			<image v-else :src="listinfo.bgUrl" @click="clickImg" mode="aspectFill" style="width: 100%;"></image>
		</view> 
		<view class="caty-acction">
			<image class="caty-img" v-if="listinfo.avatar == null" src="@/static/missing-face.png" mode=""></image>
			<image class="caty-img" v-else :src="listinfo.avatar" @click="clickdef" mode=""></image>
			<view class="acvpert">{{listinfo.nick}}</view>
			<view style="transform: translateY(-50%);">
				<span style="margin-left: 50rpx;color: #b6b6b6; font-size: 25rpx;">获赞:{{listinfo.userCounter.fanNumber}}</span>
				<span style="margin-left: 50rpx;color: #b6b6b6; font-size: 25rpx;">搜藏:{{listinfo.userCounter.favoritesNumber}}</span>
				<van-button round class="caty-button" @click="navTo('/package/notice/notice')">编辑</van-button>
			</view>
		</view>
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view
					class="list-scroll-content"   
					scroll-y
					@scrolltolower="loacftr"
				>   
			       <!-- 空白页 -->
			       <view v-if="infolist.length == 0">
			     <Blank v-if="type == 'hide'" isedit="暂无收藏哦~~"></Blank>
			     <Blank v-if="type == 'footprint'" isedit="暂无足迹哦~~"></Blank>
			       </view>
				   
				   <!-- 列表 -->
			       <view class="cate-liket" v-else>	
			       <view class="cate-rietyon" v-for="(item,index) in infolist" :key="index">
					   <!-- 我的动态 -->
					   <view v-if="tabCurrentIndex == 0">
					   	<!-- 图文 -->
					   	<view v-if="infolist[index].detailType == 'Json'" @click="loaddocen(item)">
					   	<img class="cate-comig"
					   	 :src="item.images[0]"  mode='widthFix' bindtap="viewImage" alt="" style="width: 100%;" >
					   	 </view>
					   	 <!-- 视频 -->
					   	 <view v-else @click="loaddocen(item)">
					   	 <video class="cate-comig" controls type="video/mp4" :src="item.detailUrl"></video>
					   	 <view class="cate-opemak">
					   	 <van-icon name="play" />
					   	 </view>
					   	
					   	 </view>
					   	 <span class="cate-conspan" >{{infolist[index].title}}</span>
					   	 <view>
					   	 	<img class="cate-image" @click="loaddocen(item)" v-if="infolist[index].avatar != null" :src="infolist[index].avatar" alt="">
					   	 	<img class="cate-image" @click="loaddocen(item)" v-else src="@/static/missing-face.png" alt="">
					   	 	<test class="cate-clogion" @click="loaddocen(item)">{{infolist[index].nick == null? '游客':infolist[index].nick}}</test>
					   	 	 <van-icon class="cate-icon" name="star-o" size="18" v-if="infolist[index].favoritesFlag == false" @click="aaaa(item)"/>
					   	 	 <van-icon class="cate-icon" name="star" size="18" v-else color="#ff7144" @click="aaaa(item)"/>
					   	 	 <span class="cate-spanon">{{infolist[index].favorites}}</span>
					   	 </view>

					   </view>
					   
					   <!-- 我的搜藏 -->
					   <view v-else>
			       	 <!-- 图文 -->
			       	<view v-if="infolist[index].articleInfoResp.detailType == 'Json'" @click="loaddocen(item)">
			       	<img class="cate-comig"
			       	 :src="item.articleInfoResp.images[0]"  mode='' bindtap="viewImage" alt="">
			       	 </view> 
			       	 <!-- 视频 -->
			       	 <view v-else @click="loaddocen(item)">
			       	 <img class="cate-comig"  :src="infolist[index].articleInfoResp.extendData.thumbnailUrl"> 	
			       	 <view class="cate-opemak">
			       	 <van-icon name="play" />
			         </view>
					
			       	 </view>
			       	 <span class="cate-conspan" >{{infolist[index].articleInfoResp.title}}</span>
			       	 <view> 
			       	 	<img class="cate-image" @click="loaddocen(item)" v-if="infolist[index].avatar != null" :src="infolist[index].avatar" alt="">
			       	 	<img class="cate-image" @click="loaddocen(item)" v-else src="@/static/missing-face.png" alt="">
			       	 	<test class="cate-clogion" @click="loaddocen(item)">{{infolist[index].nick == null? '游客':infolist[index].nick}}</test>
			       	 	 <van-icon class="cate-icon" name="star-o" size="18" v-if="infolist[index].articleInfoResp.favoritesFlag == false" @click="aaaa(item)"/>
			       	 	 <van-icon class="cate-icon" name="star" size="18" v-else color="#ff7144" @click="aaaa(item)"/>
			       	 	 <span class="cate-spanon">{{infolist[index].articleInfoResp.favorites}}</span>
			       	 </view>
					 </view>
					 
			       	 </view>
			       	 </view>
			       <van-loading class="actoue" v-show="siopen" size="24px" type="spinner">加载中...</van-loading>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
         
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import Api from '@/http/api.js'
	import roles from '@/http/roles.js'
	import Blank from '@/package/components/blank.vue'
	export default{
		components:{Blank},
		data(){
			return{
				siopen:false,
				imgUrl:'https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/%E8%83%8C%E6%99%AF.png',
				tabCurrentIndex: 0,
				listinfo:[],
				infolist:[],
				info:{
					cancel:"",
					articleId:''
				},
				q:{
					index:1,
					size:Number
				},
				a:10,
				navList:[{
						state: 0,
						text: '动态',
				},
				{
					state: 1,
					text: '收藏',
				}]
			}
		},
		onLoad(){
			this.loacftr()
			// 文章列表
			this.loacher()
		},
		onReachBottom:function(){
			const that = this;
			this.siopen = true
			this.q.size = this.q.size+20 
			this.a = this.q.size
			setTimeout(async ()=>{
			if(this.tabCurrentIndex == 0){
				const res = await roles.dynamic(this.q)
				this.infolist = res.data.data
			}else{
				const res = await Api.xhide(this.q)
				this.infolist = res.data.data
			}
			 that.siopen = false
			},1000)
		},
		methods:{
			// 个人信息
			async loacftr(){
				const res = await roles.userinfo()
				this.listinfo = res.data
			},
			// 文章列表
			async loacher(){
				this.q.size = this.a
				if(this.tabCurrentIndex == 0){
					const res = await roles.dynamic(this.q)
					this.infolist = res.data.data
				}else{
					const res = await Api.xhide(this.q)
					this.infolist = res.data.data
				}
			},
			// 跳转文章详细
			async loaddocen(item){
				if(item.detailType == "Video"){
						uni.navigateTo({
						url: `/package/detail/video?id=${item.articleId}&user=${item.articleExtendData.userId}`,
						 })
					
				}else{
				
				   uni.navigateTo({
					  url: `/package/detail/detail?id=${item.articleId}&user=${item.articleExtendData.userId}`,
					})
				}
			},
			// 收藏
			async aaaa(item){	
				console.log(item)
				this.info.articleId = item.articleId
				this.info.cancel = item.favoritesFlag
				const ress = await Api.collect(this.info)
				this.loacher()
			},
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				console.log(this.tabCurrentIndex)
				this.loacher()
			},
			//顶部tab点击
			tabClick(index){  
				this.tabCurrentIndex = index;
				this.loacher()
			},
			// 图片放大阅览
			clickImg(){
				const imurl = this.listinfo.bgUrl
				  wx.previewImage({
				    urls: [imurl], //需要预览的图片http链接列表，注意是数组
				    current: imurl, // 当前显示图片的http链接，默认是第一个
				    success: function (res) { 
						wx.editImage({
						  src: this.imgUrl, // 图片路径
						})
					},
				    fail: function (res) { },
				    complete: function (res) { },
				  })
			},
			// 头像放大阅览
			clickdef(){
				const imurl = this.listinfo.avatar
				  wx.previewImage({
				    urls: [imurl], //需要预览的图片http链接列表，注意是数组
				    current: imurl, // 当前显示图片的http链接，默认是第一个
				    success: function (res) { 
						wx.editImage({
						  src: this.imgUrl, // 图片路径
						})
					},
				    fail: function (res) { },
				    complete: function (res) { },
				  })
			},
			navTo(url){
				uni.navigateTo({  
					url
				})  
			},
		}
	}
</script>

<style lang="scss">
	.caty-acction{
		background-color: #fff;
		width: 100%;
		transform: translateY(-27%);
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.caty-img{
			width: 140rpx;
			height: 140rpx;
			margin-left: 50rpx;
			transform: translateY(-50%);
			border-radius: 50%;
		}
		.acvpert{
		  transform: translateY(-100%) !important; 
			margin-left: 50rpx;
			font-size: 30rpx;
		    font-weight: 400;
		}
	}
	.caty-button{
			 float: right;
			 margin-right: 30rpx;
			 font-size: 24rpx;
			 .van-button{
				 height: 56rpx;
				 border: 1px solid #1d1d1d;
				 color: #818080;
				 transform: translateY(-100%);
			 }
	}
	.navbar{
		display: flex;
		height: 40px;
		width: 100%;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $uni-color-primary;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0; 
					transform: translateX(-50%);
					width: 44px;    
					height: 0; 
					border-bottom: 2px solid $uni-color-primary;
				}
			}
		}
	}
	.swiper-box{
	  height: 650px;	
	}
	.list-scroll-content{
		height: 100%;
	}
     // 文章列表
     .cate-liket{
     	 column-gap: 5rpx;
     	  column-count: 2;
     	  padding: 10rpx 15rpx 10rpx 15rpx;
         background-color: #f5f5f5;
     	.cate-rietyon{	
     		width: 97%; 
     		break-inside: avoid;
     		background-color: #FFFFFF;
     		border-radius: 20rpx !important;
     		margin-bottom: 45rpx;
			margin-top: 0;
     		padding-bottom: 10rpx;
     		break-inside: avoid
     	}
     	.cate-comig{
     		width: 100%;
     		border-top-left-radius:20rpx;
     		border-top-right-radius:20rpx;
     	}
     }
     .cate-conspan{
     		display: -webkit-box;
     	    color: #1d1d1d;
     		font-size: 24rpx;
     		margin-left: 20rpx;
     		margin-right: 20rpx;
     		margin-bottom: 10rpx;
     		line-height: 28rpx;
     		font-weight: 500;
     		overflow:hidden;
     		-webkit-line-clamp: 2; /* 能够显示的最大行数 */
     	    -webkit-box-orient: vertical; 
     	}
     	.cate-image{
     		height: 45rpx;
     		width: 45rpx;
     		border-radius: 50%;
     	    margin-left: 20rpx;
     	}
     	
     .cate-icon{
     	transform: translateX(25rpx);
     }
     .cate-spanon{
     	display: inline-block;
     	transform: translateX(25rpx);
     	font-weight: 500 !important;
     	font-size: 24rpx;
     	color: #8a8a8a;
     }
     .cate-clogion{
     	    display: inline-flex;
     	    width: 150rpx;
     		font-size: 24rpx;
     		transform: translateY(-30%);
     		margin-left: 10rpx;
     		color: #A8A8A8;
     	}
     	.cate-opemak{
     		background-color: rgba(0, 0, 0, 0.3);
     		width: 35rpx;
     		height: 35rpx;
     		border-radius: 50%;
     		z-index: 800;
     		position: relative;
     		left: 280rpx;
     		bottom: 450rpx;
     	}
     	.van-icon{
     		position: relative;
     		bottom: 3rpx;
     	}
     // 加载
     .actoue{
     	margin-left: 40%;
     	text-align: center;
     }

</style>